<template>
  <section>
    <el-card shadow="never" class="cardBox">
      <div slot="header" class="clearfix">
        <span>交易统计</span>
      </div>
      <el-row type="flex" justify="space-between" :gutter="20">
        <el-col :span="8" class="border">
          <el-form label-width="120px">
            <el-form-item label="订单数量："
              >{{ data.order_qty }}次</el-form-item
            >
            <el-form-item label="交易总量："
              >{{ data.total_qty }}度</el-form-item
            >
            <el-form-item label="交易总额："
              >{{ $coinToYuan(data.total_amt) }}元</el-form-item
            >
            <el-form-item label="平均价格："
              >{{ $coinToYuan(data.avg_price) }}元</el-form-item
            >
            <el-form-item label="自由交易额度："
              >{{ $coinToYuan(data.p2p_amt) }}元</el-form-item
            >
            <el-form-item label="集中交易额度："
              >{{ $coinToYuan(data.central_amt) }}元</el-form-item
            >
          </el-form>
        </el-col>

        <el-col :span="16">
          <div style="width: 100%; height: 260px" id="echartss"></div>
        </el-col>
      </el-row>
      <!-- <el-row type="flex" justify="space-between"> -->
      <!-- <el-row v-loading="loading">
       
      </el-row> -->

      <!-- </el-row> -->
    </el-card>
  </section>
</template>
<script lang='ts'>
import { Vue, Component, Watch, Prop } from "vue-property-decorator";
import BaseSlot from "@/components/BaseSlot.vue";
import Constant from "@/lib/Constant";
import Echarts from "echarts";

@Component
export default class MyApplication extends Vue {
  @Prop()
  protected data!: any;
  // protected data: any = {
  //   order_qty: null
  // };
  // protected created() {
  //   console.log(this.data)
  // }
  @Watch("data", { immediate: true, deep: true })
  protected init() {
    this.$nextTick(() => {
      this.draw();
    });
  }
  protected mounted() {
    this.$nextTick(() => {
      this.draw();
    });
  }
  private draw() {
    const element: any = document.getElementById("echartss");
    const myChart = Echarts.init(element);
    myChart.setOption({
      //   title: {
      //     text: '天气情况统计',
      //     subtext: '虚构数据',
      //     left: 'center'
      // },
      tooltip: {
        trigger: "item",
        formatter: "{a} <br/>{b} : {c} ({d}%)",
      },
      legend: {
        // orient: 'vertical',
        // top: 'middle',
        bottom: 10,
        left: "center",
        data: ["集中交易", "分布式交易"],
      },
      color: ["#FFD400", "#077BE8"],
      series: [
        {
          type: "pie",
          radius: "65%",
          center: ["50%", "50%"],
          selectedMode: "single",
          data: [
            { value: this.data.central_amt, name: "集中交易" },
            { value: this.data.p2p_amt, name: "分布式交易" },
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
      ],
    });
    myChart.dispatchAction({
      type: "mousemove",
    });
  }
}
</script>

<style lang="scss" scoped>
.mr_vertical_10 {
  margin: 10px 0;
}
.border {
  border-right: 1px solid rgba(211, 211, 211, 1);
}
.el-form-item {
  margin-bottom: 0;
}
/deep/ .el-form-item__label {
  padding: 0;
}
</style>


